<template>
  <div class="buyingIfor">
    <template v-for="(i,index) in dataList">
      <el-card shadow="hover" :key="index">
        <div class="title" v-if="i.shopId">{{i.shopName}}</div>
        <div>
          <template v-for="(item,index1) in btn">
            <el-button
              :key="index1"
              @click="handler(index1,index)"
              v-if="item.isShow"
              type="primary"
              style="margin:0 10px 0px 0"
              :size="item.size"
            >{{item.title}}</el-button>
          </template>
          <div class="total">
            <span>共</span>
            <span>{{total[index].number}}</span>
            <span>种商品，合计金额：</span>
            <span>{{total[index].price}}</span>
          </div>
          <avue-crud
            ref="index"
            style="width:100%"
            :data="i.goods"
            :option="tableOption"
            :table-loading="loading"
          >
            <template slot="conversionNum" slot-scope="scope">
              <el-input v-model="scope.row.conversionNum"  @input="onConversionNumChange"  :min='0' type="number">
                <template slot="append">{{scope.row.convertUnit}}</template>
              </el-input>
            </template>
            <template slot="goodSubtotal" slot-scope="scope">
              <el-input v-model="scope.row.goodSubtotal">
                <template slot="append">元</template>
              </el-input>
            </template>
            <template slot="menu" slot-scope="scope">
              <el-button type="text" icon="el-icon-remove" @click="del(scope.row,index)">移除</el-button>
            </template>
          </avue-crud>
          <choiceGoods ref="choiceGoods" @trigger="trigger" />
        </div>
      </el-card>
    </template>
  </div>
</template>

<script src='./buyingIfor.js'></script>

<style lang="scss">
.buyingIfor {
  .title {
    padding: 0 0 20px 0;
    font-weight: 500;
    font-size: 24px;
  }
  .total {
    margin: 20px 0;
    span:nth-child(even) {
      font-weight: 600;
      font-size: 18px;
    }
    span:nth-child(odd) {
      font-size: 14px;
    }
  }
}
</style>